import { Radio } from 'antd';
import {  useCallback, useState } from 'react';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { TextWidget } from '@inbiz/react';
import type {ReactElement} from 'react'

/**
 * 搜索方式
 */
 const SearchModeView = (): ReactElement | null => {
  const [radioValue, $radioValue] = useState(0)
  const { selectShowTab, isFuzzySearch } = useSearchUIState();
  
  const updateUIState = useSearchUIDispatch();

  const onIsFuzzySearch = useCallback(
    (e) => {
      updateUIState({
        isFuzzySearch: Number(e.target.value) == 0,
      });
      $radioValue(e.target.value)
    },
    [updateUIState],
  );

  return selectShowTab?.searchMode ? (
    <Radio.Group
      className="search-mode-container"
      onChange={onIsFuzzySearch}
      size="small"
      value={radioValue}
    >
      <Radio value={0}>
        <span>
          <TextWidget>SearchEngine.fuzzySearch</TextWidget>
        </span>
      </Radio>
      <Radio value={1}>
        <span>
          <TextWidget>SearchEngine.PreciseSearch</TextWidget>
        </span>
      </Radio>
    </Radio.Group>
  ) : null;
};
export default SearchModeView
